<template>
  <a-modal
    title="选择审批人员"
    :visible="visible"
    :closable="false"
    centered
    @ok="handleOk"
    @cancel="handleCancel"
    width="600px"
  >
    <div style="max-width:400px;max-height: 500px;">
      <a-form-model :model="form" ref="selectUserForm">
        <template v-for="(item, index) in columns">
          <template v-if="item.fixed != '1'">
            <a-form-model-item
              v-if="item.showCondition"
              :label="'是否需要' + item.label"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
              :key="'radioUserNode' + index"
            >
              <a-radio-group v-model="item.show">
                <a-radio
                  v-for="(item1, index1) in item.showCondition"
                  :key="item1.node + '_' + index1"
                  :value="item1.value"
                >
                  {{ item1.label }}
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item
              v-if="item.show != '0'"
              :label="item.label"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
              :key="'selectUserNode' + index"
            >
              <template>
                <a-select
                  :mode="item.mode"
                  show-search
                  :value="item.mode == 'multiple' && item[item.node] ? item[item.node].split(',') : item[item.node]"
                  :default-active-first-option="false"
                  :show-arrow="false"
                  :filter-option="false"
                  :not-found-content="null"
                  @search="fetchUserList"
                  :disabled="item.disabled == 'true' ? true : false"
                  @change="
                    (value) =>
                      selectUserList(value, index, 1, [
                        { from: 'realname', to: item.node },
                        { from: 'username', to: item.node + 'Id' },
                      ])
                  "
                  allowClear
                >
                  <a-select-option v-for="d in personList" :key="d.username">
                    {{ d.realname }}({{ d.username }})
                  </a-select-option>
                </a-select>
              </template>
            </a-form-model-item>
          </template>
        </template>
      </a-form-model>
      <div style="display: flex" v-if="labels && labels.length>0">
        <div style="min-width: 60px; max-width: 60px; line-height: 35px">审批流程:</div>
        <div style="display: flex; flex-wrap: wrap; line-height: 35px">
          <template v-for="(item, index) in labels">
            <div :key="'labels' + index">
              <span style="margin: 5px; padding: 5px; border: 1px solid grey">{{ item }}</span
              >->
            </div>
          </template>
          <div><span style="margin: 5px; padding: 5px; border: 1px solid grey">结束</span></div>
        </div>
      </div>
      <div v-if="tips" style="color: red">注意:{{ tips }}</div>
    </div>
  </a-modal>
</template>
<script>
import { UserMixin } from '@/mixins/UserMixin'
export default {
  mixins: [UserMixin],
  components: {
    UserSelect: () => import('@/components/tools/UserSelect'),
  },
  props:{
    labels:{
      type:Array,
      default:()=>{
        return []
      }
    }
  },
  name: 'ProcessUserSelect40',
  data() {
    return {
      form: {},
      visible: false,
      columns: [],
      tips: null,
    }
  },
  mounted() {},
  computed: {
  },
  methods: {
    doSelect(columns ,tips) {
      this.columns = columns
      this.tips = tips
      this.visible = true
    },
    handleOk() {
      for (let col of this.columns) {
        if (col.show != '0') {
          if (!col[col.node] && col.required == '1') {
            return this.$message.warning('请选择' + col.label)
          }
        }
      }
      this.visible = false
      this.$emit('selectUserConfirm', this.columns)
    },
    handleCancel() {
      this.visible = false
      this.$emit('selectUserConfirm', null)
    },
    selectUserList(selected, obj, mutil, mapList) {
      let vm = this
      let curentList = []
      if (vm.columns && vm.columns[obj] && vm.columns[obj][mapList[0].to]) {
        let length = vm.columns[obj][mapList[0].to].split(',').length
        for (let i = 0; i < length; i++) {
          let current = curentList[i] || {}
          for (let map of mapList) {
            let values = vm.columns[obj][map.to].split(',')
            current[map.from] = values[i]
          }
          curentList[i] = current
        }
      }
      curentList.forEach((p) => {
        vm.$set(vm.personMap, p.username, p)
        vm.$set(vm.personMap, p.realname, p)
      })
      if (!selected || selected.length <= 0) {
        mapList.forEach((map) => {
          vm.$set(vm.columns[obj], [map.to], null)
        })
      } else {
        let selectMap = {}
        if (Array.isArray(selected)) {
          for (let s of selected) {
            for (let map of mapList) {
              if (vm.personMap[s]) {
                if (selectMap[map.to]) {
                  if (selectMap[map.to].indexOf(vm.personMap[s][map.from]) < 0) {
                    selectMap[map.to] = [...selectMap[map.to], vm.personMap[s][map.from]]
                  }
                } else {
                  selectMap[map.to] = [vm.personMap[s][map.from]]
                }
              }
            }
          }
        } else {
          mapList.forEach((map) => {
            selectMap[map.to] = [vm.personMap[selected][map.from]]
          })
        }
        for (let k in selectMap) {
          vm.$set(vm.columns[obj], k, selectMap[k].join(','))
        }
      }
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-transfer-list .ant-btn-primary {
  color: #bbb;
}
/deep/ .ant-transfer-list:first-of-type .ant-transfer-list-header-selected {
  display: none;
}
/deep/ .ant-modal-content {
  border-radius: 15px;
}
/deep/ .ant-modal-title,
/deep/ .ant-modal-footer {
  text-align: center;
}
/deep/ .ant-transfer-operation .ant-btn-primary {
  background-color: #f5f5f5 !important;
}
/deep/ .ant-modal-header {
  border-radius: 15px 15px 0 0;
  background-image: linear-gradient(90deg, #15b1ff 0%, #1158c9 100%);
}
/deep/ .ant-modal-title {
  color: #fff;
}
/deep/ .ant-form-item-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>